<template>
    <div class="statistics-group">
        <!--<Row type="flex" justify="start" :gutter="20">-->
            <!--<Col span="4" v-for="(item, index) in typeNumObj" :key="index">-->
                <!--<div class="item style04" :class="itemStyle[index]">-->
                    <!--<Icon type="ios-aperture" class="icon" />-->
                    <!--<div class="content">-->
                        <!--<div class="statistics">{{item.num}}</div>-->
                        <!--<div class="txt">{{item.name}}</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</Col>-->
        <!--</Row>-->
        <div class="statistics-group">
            <div class="item style04" :key="index" :class="itemStyle[index]" v-for="(item, index) in typeNumObj" @click="clickType(item)">
<!--                <Icon :custom="item.icon"></Icon>-->
                <img class="img-item" :src="item.icon"/>
                <div class="content">
                    <div class="statistics">{{item.num}}</div>
                    <div class="txt">{{item.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
  getAsymptomaticCount,
  getContacCount,
  getglbgCount,
  getglryCount,
  getSamplingCount,
  getwlryCount,
  getzsryCount,
  getbgtjList,
  getglRYSSXCount
} from '@/api/statistics-data-list'

export default {
  name: 'StatisticsBar',
  props: {
    barType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      typeNumObj: [
        // {
        //   name: '测试1',
        //   num: 100,
        //   icon:
        // },
        // {
        //   name: '测试2',
        //   num: 100
        // },
        // {
        //   name: '测试3',
        //   num: 100
        // },
        // {
        //   name: '测试4',
        //   num: 100
        // }
      ],
      itemStyle: [
        'item-style01',
        'item-style02',
        'item-style03',
        'item-style04',
        'item-style05',
        'item-style03',
        'item-style04'
      ]
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    immigrationAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      // { dataList: ['大东区', '皇姑区'] }
      getwlryCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('外来入沈数据', data.data)
          this.typeNumObj = [
            {
              name: '入境人员总数',
              num: data.data.zs,
              // num: 13841,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '目的地沈阳总数',
              num: data.data.mdsy,
              // num: 13841,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '中国籍人员总数',
              num: data.data.zgj,
              type: '中国',
              // num: 12634,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E4%B8%AD%E5%9B%BD.png'
            },
            {
              name: '外国籍人员总数',
              num: data.data.qtgj,
              type: '其他',
              // num: 1207,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E4%B8%96%E7%95%8C.png'
            }
            // {
            //   name: '转运人员总数',
            //   num: data.data.zysl,
            //   icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585735386000/liangren.png'
            // },
            // {
            //   name: '在沈人员总数',
            //   num: data.data.glsl,
            //   icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585735386000/suo.png'
            // }
            // {
            //   name: '密接人员总数',
            //   num: data.data.mjsl,
            //   icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585735386000/huanzhe1.png'
            // },
            // {
            //   name: '确诊及无症状数',
            //   num: data.data.qzjwzzsl,
            //   icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585735386000/bingchuang.png'
            // }
          ]
        }
      })
    },
    isolationAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      getglryCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('隔离数据', data.data)
          this.typeNumObj = [
            {
              name: '隔离人员总数',
              num: data.data.zscount,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '解除隔离人员总数',
              state: 2,
              num: data.data.release_num,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E8%A7%A3%E9%99%A4.png'
            },
            {
              name: '正在隔离人员总数',
              state: 1,
              num: data.data.isolate_num, // + '/' + data.data.county_num
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%AD%A3%E5%9C%A8%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '集中安置点',
              type: '宾馆隔离（集中安置点）',
              num: data.data.mode_at_focus,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%AE%BE%E9%A6%86%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '居家隔离(在家)',
              type: '居家隔离（在家）',
              num: data.data.mode_at_home,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%B1%85%E5%AE%B6%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '居家隔离(宾馆)',
              type: '居家隔离（宾馆）',
              num: data.data.mode_at_hotel,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%B1%85%E5%AE%B6%E5%AE%BE%E9%A6%86%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '单位隔离',
              type: '单位隔离',
              num: data.data.mode_at_unit,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%8D%95%E4%BD%8D%E9%9A%94%E7%A6%BB.png'
            }
          ]
        }
      })
    },
    transportAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      getzsryCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('转运数据', data.data)
          this.typeNumObj = [
            {
              name: '转运人员总数',
              num: data.data.zscount,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            // {
            //   name: '当日转运人员数量',
            //   num: data.data.drcount,
            //   icon: 'checkmark'
            // },
            {
              name: '转运省内人员数量',
              num: data.data.snzy,
              type: 2,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E8%BE%BD%E5%AE%81%E7%9C%81.png'
            },
            {
              name: '转运省外人员数量',
              num: data.data.swzy,
              type: 1,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E4%B8%AD%E5%9B%BD.png'
            },
            {
              name: '当日省内转运',
              num: data.data.drsnzy,
              type: 3,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E8%BE%BD%E5%AE%81%E7%9C%81(%E4%BB%8A%E6%97%A5).png'
            },
            {
              name: '当日省外转运',
              num: data.data.drswzy,
              type: 4,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E4%B8%AD%E5%9B%BD(%E4%BB%8A%E6%97%A5).png'
            }
          ]
        }
      })
    },
    closeContactAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      // { dataList: ['大东区', '皇姑区'] }
      getContacCount(data).then(res => {
        let data = res.data
        if (data.errcode === 0) {
          console.log('密接数据', data.data)
          this.typeNumObj = [
            {
              name: '密接人员总数',
              num: data.data.zs,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '正在观察密接人员',
              num: data.data.zs - data.data.jcgc,
              type: '医学观察',
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%AD%A3%E5%9C%A8%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '解除观察密接人员',
              num: data.data.jcgc,
              type: '解除隔离',
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E8%A7%A3%E9%99%A4.png'
            }
          ]
        }
      })
    },
    confirmedAsymptomaticAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      getAsymptomaticCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('确诊&无症状数据', data.data)
          this.typeNumObj = [
            {
              name: '确诊人员总数',
              num: data.data.wzz + data.data.qz,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '确诊病例',
              num: data.data.qz,
              type: 1,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E7%97%85%E6%AF%92.png'
            },
            {
              name: '无症状感染者',
              num: data.data.wzz,
              type: 2,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E8%82%BA%E9%83%A8%20.png'
            },
            {
              name: '治愈',
              num: data.data.zy,
              type: 3,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%81%A5%E5%BA%B7%E6%9C%8D%E5%8A%A1.png'
            }
          ]
        }
      })
    },
    isolationHotelAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      // { dataList: ['大东', '皇姑'] }
      getglbgCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('宾馆数据', data.data)
          this.typeNumObj = [
            {
              name: '宾馆总数',
              num: data.data.zscount,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%AE%BE%E9%A6%86%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '房间总数',
              num: data.data.fjslcount,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%B1%85%E5%AE%B6%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '正在使用房间数量',
              num: data.data.syfjcount,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736865000/fangjian.png'
            },
            {
              name: '可接纳房间数量',
              num: data.data.kyfjcount,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736865000/yuanxin.png'
            },
            {
              name: '维护房间数量',
              num: data.data.fjslcount - data.data.syfjcount - data.data.kyfjcount,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E7%BB%B4%E6%8A%A4.png'
            }
            // , {
            //   name: '明日预测',
            //   num: data.data.fjslcount - data.data.syfjcount,
            //   icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736865000/zonglan.png'
            // }
          ]
        }
      })
    },
    nucleicAcidDetectionAction (item) {
      console.log(item, 'statisticsBar')
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      getSamplingCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('核酸检测数据', data.data)
          this.typeNumObj = [
            {
              name: '核酸检测人次',
              type: 'nucleic',
              num: data.data.nucleic_num,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '核酸检测(阴性)人次',
              type: 'nucleic_yin',
              num: data.data.nucleic_yin,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736865000/yuanxin.png'
            },
            {
              name: '核酸检测(阳性)人次',
              type: 'nucleic_yang',
              num: data.data.nucleic_yang,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736940000/banyuan.png'
            },
            {
              name: '血清检测人次',
              type: 'serum',
              num: data.data.serum_num,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736940000/liangren.png'
            },
            {
              name: '血清检测(阴性)人次',
              type: 'serum_yin',
              num: data.data.serum_yin,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736940000/huanzhe1.png'
            },
            {
              name: '血清检测(阳性)人次',
              type: 'serum_yang',
              num: data.data.serum_yang,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736940000/huanzhe2.png'
            }
          ]
        }
      })
    },
    // 北京分流
    bjShuntAction (item) {
      let data = {}
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      getglRYSSXCount(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('北京分流', data.data)
          this.typeNumObj = [
            {
              name: '北京分流人数',
              num: data.data.bjDevideNum,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%80%BB%E6%95%B0.png'
            },
            {
              name: '入沈人数',
              num: data.data.leaveNum_sy,
              type: 4,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E5%B1%85%E5%AE%B6%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '转运人数',
              num: data.data.leaveNum,
              type: 1,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E8%A7%A3%E9%99%A4.png'
            },
            {
              name: '集中隔离人数',
              type: 2,
              num: data.data.isolateModeNum,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%AD%A3%E5%9C%A8%E9%9A%94%E7%A6%BB.png'
            },
            {
              name: '正在隔离人数',
              type: 3,
              num: data.data.isolation_time,
              icon: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/in-sy/%E6%AD%A3%E5%9C%A8.png'
            }
          ]
        }
      })
    },
    isolationHotelDetailAction (item) {
      console.log(item, 'statisticsBar')
      let data = {
        // county: '大东区'
      }
      if (item && item.length > 0) {
        data = { dataList: item.split(',') }
      }
      getbgtjList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          console.log('隔离宾馆明细', data.data)
          this.typeNumObj = [
            {
              name: '房间总数',
              num: data.data.results[0].fjslcount,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736865000/zonglan.png'
            },
            {
              name: '可接纳房间数',
              num: data.data.results[0].syfjcount,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736940000/banyuan.png'
            },
            {
              name: '使用房间数',
              num: data.data.results[0].kyfjcount,
              icon: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1585736865000/yuanxin.png'
            }
          ]
        }
      })
    },
    // 单击类别
    clickType (val) {
      this.$emit('getType', val)
    }
  },
  mounted () {
    switch (this.barType) {
      case 'immigration':
        this.immigrationAction()
        break
      case 'isolation':
        this.isolationAction()
        break
      case 'transport':
        this.transportAction()
        break
      case 'closeContact':
        this.closeContactAction()
        break
      case 'confirmedAsymptomatic':
        this.confirmedAsymptomaticAction()
        break
      case 'isolationHotel':
        this.isolationHotelAction()
        break
      case 'nucleicAcidDetection':
        this.nucleicAcidDetectionAction()
        break
      case 'isolationHotelDetail':
        this.isolationHotelDetailAction()
        break
      case 'bjShunt':
        this.bjShuntAction()
    }
  },
  watch: {},
  computed: {}
}
</script>

<style scoped>
    .statistics-group {
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .statistics-group .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
    }
    .statistics-group .item .icon {
        font-size: 46px;
        color: white;
    }
    .statistics-group .item img {
        width: 30%;
    }
    .statistics-group .item .content {
        width: 70%;
        text-align: right;
    }
    .statistics-group .item .content .txt{
        font-size: 14px;
        color: white;
        text-align: right;
    }
    .statistics-group .item .content .statistics{
        font-size: 32px;
        color: white;
    }
    .item {
        width: 12%;
        cursor: pointer;
    }
    .item-style01 {
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style02 {
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .item-style03 {
        background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
    }
    .item-style04 {
        background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
    }
    .item-style05{
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style06{
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .img-item{
        width: 100%;
    }
</style>
